<template>
  <div class="err-container">
    <el-row>
      <el-col :span="12">
        <img :src="img">
      </el-col>
      <el-col :span="12">
        <h1 class="text-jumbo">
          联系管理员
        </h1>
        <h2>{{ message }}</h2>
        <h2>
          Please check that the URL you entered is correct, or click the button
          below to return to the homepage.
        </h2>
        <a href="#">返回首页</a>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts">
import four from "/@/assets/404.png"
export default defineComponent({
  name: "404",
  setup() {
    const message = computed(() => {
      return "The webmaster said that you can not enter this page..."
    })

    return {
      four,
      message
    }  
  }
})
</script>

<style lang="less" scoped>
.err-container {
  width: 800px;
  max-width: 100%;
  margin: 100px auto;

  .text-jumbo {
    font-size: 60px;
    font-weight: 700;
    color: #484848;
  }
}
</style>